import { configureStore } from "@reduxjs/toolkit";
import { apiService } from "@store/service";
import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
import { credentialSlice } from "@slice/credential";
import { persistReducer } from "redux-persist";
import storage from "redux-persist/lib/storage";
import {
  FLUSH,
  PAUSE,
  PERSIST,
  PURGE,
  REGISTER,
  REHYDRATE,
} from "redux-persist";
import { guestChannelSlice } from "@slice/guestChannel";
import { newsSlice } from "@slice/news";
import { historySlice } from "@slice/history";
import { searchResultSlice } from "@slice/search";
import { commentsSlice } from "@slice/comments";
import { replySlice } from "@slice/reply";

// 持久化用户登录凭据
// 使用 redux-persist 的 persistReducer 方法对 credentialSlice.reducer 进行持久化处理
// 设置存储键为 "credential"，使用默认的 storage 作为存储介质
const persistCredentialReducer = persistReducer(
  { key: "credential", storage },
  credentialSlice.reducer
);

// 持久化访客频道列表数据
// 对 guestChannelSlice.reducer 进行持久化处理，设置存储键为 "guestChannel"
const persistGuestChannelReducer = persistReducer(
  { key: "guestChannel", storage },
  guestChannelSlice.reducer
);

// 持久化搜索历史记录
// 对 historySlice.reducer 进行持久化处理，设置存储键为 "history"
const persistHistoryReducer = persistReducer(
  { key: "history", storage },
  historySlice.reducer
);

export const store = configureStore({
  // 在非生产环境中启用浏览器的开发者工具
  // 通过检查环境变量 NODE_ENV 来决定是否启用 Redux DevTools
  devTools: process.env.NODE_ENV !== "production",
  // 合并 reducer, 使用 combineReducers 方法的效果
  // 将各个 slice 的 reducer 和 apiService 的 reducer 合并到一个主 reducer 中
  reducer: {
    [apiService.reducerPath]: apiService.reducer,
    [credentialSlice.name]: persistCredentialReducer,
    [guestChannelSlice.name]: persistGuestChannelReducer,
    [newsSlice.name]: newsSlice.reducer,
    [historySlice.name]: persistHistoryReducer,
    [searchResultSlice.name]: searchResultSlice.reducer,
    [commentsSlice.name]: commentsSlice.reducer,
    [replySlice.name]: replySlice.reducer,
  },
  // 配置中间件
  // 使用 getDefaultMiddleware 获取默认中间件配置，并添加 apiService.middleware
  // 配置 serializableCheck 以忽略 redux-persist 触发的特定 action 类型的序列化检查
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
      },
    }).concat([apiService.middleware]),
});

// 获取 dispatch 方法的类型
// 使用 store.dispatch 的类型定义 AppDispatch 类型，以便在项目中使用时能够获得类型提示
export type AppDispatch = typeof store.dispatch;
// 编写一个 useTypedDispatch 方法, 用于封装类型
// 使用 useDispatch 钩子时，自动应用 AppDispatch 类型
export const useTypedDispatch = () => useDispatch<AppDispatch>();

// 获取状态对象的类型
// 使用 store.getState 的返回类型定义 AppState 类型，以便在项目中使用时能够获得类型提示
export type AppState = ReturnType<typeof store.getState>;
// 编写一个 useTypedSelector 方法, 用于封装类型
// 使用 useSelector 钩子时，自动应用 AppState 类型
export const useTypedSelector: TypedUseSelectorHook<AppState> = useSelector;
